.credit-card-field__label {
	display: block;
	margin-bottom: 8px;
	font-size: 11px;
	font-weight: 500;
	line-height: 1.4;
	text-transform: uppercase;
	color: #1e1e1e;
}

.credit-card-field__stripe-element {
	position: relative;
	display: block;

	.StripeElement {
		display: block;
		width: 100%;
		box-sizing: border-box;
		border: 1px solid #949494;
		border-radius: 2px;
		padding: 10px 16px;
		font-size: 13px;
		line-height: 20px;
		background-color: #fff;
		transition: border-color 0.1s ease-in-out, box-shadow 0.1s ease-in-out;

		&:hover {
			border-color: #1e1e1e;
		}

		&--focus {
			border-color: var(--wp-admin-theme-color, #3858e9);
			box-shadow: 0 0 0 1px var(--wp-admin-theme-color, #3858e9);
			outline: 2px solid transparent;
		}

		&--invalid {
			border-color: #cc1818;
		}

		&--focus.StripeElement--invalid {
			border-color: #cc1818;
			box-shadow: 0 0 0 1px #cc1818;
		}
	}
}
